<template>
  <div>
    <!-- 头部搜索 -->
    <div class="search">
      <!-- 索索框 -->
       <span>关键字</span><el-input :style="{width:'200px' ,paddingLeft:'10px'}" @input="changeInput" v-model="searchParams.name" size="small" placeholder="请输入内容"></el-input>
       <span>录入人</span>
       
        <el-select   size="small" :style="{width:'200px' ,paddingLeft:'10px'}" v-model="searchParams.inputUserId" placeholder="请选择">
          <el-option
            v-for="item,index in inputUserList"
            :key="index"
            :label="item.inputUserName"
            :value="item.inputUserId">
          </el-option>
      </el-select>
       <span>日期</span>
          <el-date-picker
          v-model="dateParams"
          :unlink-panels='true'
          :time-arrow-control='true'
          size="small"
          :style="{width:'200px' }"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
       <el-button type="primary" size="small" :style="{marginLeft:'10px',color:'white'}" @click="search">
       <i class="el-icon-search"></i> 
        搜索
      </el-button>
      <el-button @click="resetClick" type="info" size="small"  class="btn" :style="{color:'#606266',backgroundColor:'#fff'}">
      <i class="el-icon-refresh" ></i> 重置
      </el-button>

    </div> 

    <!-- 中间的搜索 -->
     <div class="center">
       <Edit></Edit>
      <!-- 编辑 -->
      <Edit  ref='editor' :edit="'编辑'" :editData="editData"></Edit>

      <!-- <el-button type="info" size="small">重置</el-button> -->
      <el-button size="small" type="success" :style="{height:'29px'  }" class="daochu" @click="exportEXcell">
        <i class="el-icon-download"></i>
        导出
      </el-button>
      <Edit :showBtn="false" :editData="updateData"  :edit="'编辑'"  ref='xiugai'></Edit>
     </div>

    <!-- 表格 -->
    <el-table
      @select="selected"
      ref="multipleTable"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="客户姓名"
        align="center"
      ></el-table-column>
      <el-table-column align="center" label="电话">
        <template slot-scope="{ row }">{{ row.phone }}</template>
      </el-table-column>
      <el-table-column align="center" label="性别">
        <template slot-scope="{ row }">
          {{ row.sex == '1' ? '男' : row.sex == '0' ? '女' : '' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="inputUserName"
        align="center"
        label="录入人"
      ></el-table-column>
      <el-table-column label="录入时间" align="center" width="180">
        <template slot-scope="{ row }">
          {{
            row.entryTime
              ? new Date(row.entryTime)
                  .toLocaleDateString()
                  .replaceAll('/', '-')
              : ''
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="xiugai(row)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display:flex;justify-content:flex-end;padding:20px 20px 0 0;}">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchParams.pageNUm"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="searchParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</div>
  </div>
</template>

<script>
import { GetCustomeroApi,searChCustomer ,exportExl} from '@/request/api'
import {dbboun} from '@/utils/dbboun'
import saveAs from 'file-saver'
import Edit from '@/components/customer/Edit.vue'
export default {
  components:{
      Edit
  },
  data() {
    return {
      inputUserList:[],
      updateData:{
         id:null,
        name:"qqq",
        phone:122331,
        sex:'0',
        inputUserId:null,
        inputUserName:null,
      },
      editData:{
        id:null,
        name:"qqq",
        phone:122331,
        sex:'0'
      },
      tableData: [],
      multipleSelection: [],
      total: 0,
      dateParams:null,
      searchParams:{
          pageNum :1,
          pageSize :10,
          name:null,
          inputUserId :null,
          beginTime:null,
          endTime:null,
      }
    }
  },
  methods: {
    resetClick(){  
        
      this.searchParams = {
         pageNum :1,
          pageSize :10,
          name:null,
          inputUserId :null,
          beginTime:null,
          endTime:null,
      }
      this.dateParams = null
    },
    changeInput: dbboun(function(){
      this.getTableData()
    },1000),
    async exportEXcell(){
      let res =  await  exportExl({
        pageNum:1,
        pageSize:10
      },{ 
        headers:{
          'Content-Type':'application/x-www-form-urlencoded'
        },
        responseType:'blob'
      })
      if(!res) return 
      console.log(res);
      saveAs(
        new Blob([res]),
        `客户档案_${new Date().getTime()}.xlsx`
      )
    },
    xiugai(row){
        console.log(row,111);
          this.updateData.name = row.name
          this.updateData.phone = row.phone
          this.updateData.sex = row.sex
          this.updateData.id = row.id
          this.updateData.inputUserId = row.inputUserId
          this.updateData.inputUserName = row.inputUserName
          this.$refs['xiugai'].dialogVisible = true
    },
    
    selected(selection, row){
      console.log(row);
      console.log(selection.length);
      if(selection.length==1){
        this.$refs['editor'].isShow = false
      }else{
        this.$refs['editor'].isShow = true

      }
      this.editData.id = row.id
      this.editData.name = row.name
      this.editData.phone = row.phone
      this.editData.sex = row.sex

    },
   async search(){
    console.log(this.dateParams);
    if(this.dateParams){
    this.searchParams.beginTime = new Date(this.dateParams[0]).toLocaleDateString().replaceAll('/','-')
    this.searchParams.endTime =new Date(this.dateParams[1]).toLocaleDateString().replaceAll('/','-')
    }
    console.log(this.searchParams);
     let res =  await searChCustomer({
        ...this.searchParams
      })
      if(!res) return 
      this.tableData = res.rows
      this.total = res.total
   },

    handleSelectionChange() {
      //   console.log(1)
    },
        async getTableData(){
            const GetCustomerListApiRes = await GetCustomeroApi({
               ...this.searchParams
            });
            console.log(GetCustomerListApiRes);
            this.tableData = GetCustomerListApiRes.rows;
            this.total=GetCustomerListApiRes.total;
        },
		    handleCurrentChange(val){
            // 当前页数改变的时候执行这个函数
            console.log("页数改变",val);
            this.searchParams.pageNum = val;
            this.getTableData();
        },
        handleSizeChange(val){
            // 每页条数改变的时候执行这个函数
            console.log("每页条数改变",val);
            this.searchParams.pageSize = val;
            this.getTableData();
        }
  },
  created(){
    this.getTableData();
    GetCustomeroApi({
        pageNum:1,
        pageSize:1000
    }).then(res=>{
      let data =  res.rows;
      let map = new Map();
      data.forEach(item => {
          if(!map.has(item.inputUserName)){
            map.set(item.inputUserName,item)
          }
      });
      this.inputUserList =[...map.values()]
    })
  },
  mounted(){
      this.$refs['editor'].isShow = true
  }
}
</script>

<style lang="less" scoped>
.search{
  display: flex;
  white-space: nowrap;
  align-items: center;
  span{
    margin-left: 10px;
    margin-right: 10px;
  }
  font-weight: 700;
}
.center{
  display: flex;
  align-items: center;
}
.fenye {
  float: right;
  display: flex;
  justify-content: right;
  padding: 20px 20px 0 0;
}
button{
  color:@tagcolor;
}

.daochu{
  background-color: #fff8e6;
  color: #ffba00;
  border: 1px solid  #ffe399;
  &:hover{
    background-color: #ffba00;
    color: #fff8e6;
  }
}
.btn{
  &:hover{
    color:#4090ff !important;
    background-color: white;
    border: 1px solid #badeff;
  }
}
</style>
